<script setup lang="ts">
  import { ref } from 'vue';
  import { loginlog } from '@/api/userCenter';
  import { useUserStore } from '@/store';

  defineOptions({ name: 'securityIndex' });
  const formState = ref({
    real_name: '',
    account: '',
  });
  const loading = ref(true);
  const list = ref();

  const userStore = useUserStore();

  loginlog({
    user_id: userStore.userID,
  })
    .then((res) => {
      list.value = res.data.list;
    })
    .finally(() => {
      loading.value = false;
    });
  const columns = [
    {
      title: '用户',
      dataIndex: 'user_name',
    },
    {
      title: '时间',
      dataIndex: 'create_time',
    },
    {
      title: 'IP地址',
      dataIndex: 'login_ip',
    },
    {
      title: '类型',
      dataIndex: 'login_status',
      slotName: 'login_status',
      align: 'center',
    },
    {
      title: '备注',
      dataIndex: 'login_msg',
    },
  ];
  const data = reactive([]);
</script>

<template>
  <div class="container">
    <a-card
      class="general-card"
      title="最近20条系统安全日志
"
    >
      <a-col :span="24">
        <a-table
          :loading="loading"
          row-key="security"
          :columns="columns"
          :data="list"
          :pagination="false"
        >
          <!--          1成功2失败-->
          <template #login_status="{ record }">
            <a-tag
              v-if="record.login_status === 1"
              checkable
              color="green"
              :default-checked="true"
              >登录成功</a-tag
            >
            <a-tag
              v-else-if="record.login_status === 2"
              checkable
              color="red"
              :default-checked="true"
              >登录失败</a-tag
            >
          </template>
        </a-table>
      </a-col>
    </a-card>
  </div>
</template>

<style scoped lang="less"></style>
